<template>
  <div>
    <Header></Header>
    <!-- 排序 -->
    <div class="sort">
      <div :class="{ active: selSort == 1 }" @click="sort(1)">综合</div>
      <div :class="{ active: selSort == 2 }" @click="sort(2)">销量</div>
      <div :class="{ active: selSort == 3 }" @click="sort(3)">价格</div>
      <div :class="{ active: selSort == 4 }" @click="sort(4)">新品</div>
    </div>
    <div class="goodslist">
      <!-- 导航 -->
      <van-tabs @click="toGoods">
        <van-tab v-for="(item,index) in classify" :name="item.cid" :key="index" :title="item.cname">
          <!-- 商品列表 -->
          <GoodsCard :list="goods"></GoodsCard>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
import GoodsCard from "../components/GoodsCard.vue";
export default {
  data() {
    return {
      selSort: 1
    };
  },
  components: {
    Header,
    GoodsCard
  },
  mounted() {
    this.$store.dispatch("getClassify");
    // this.$store.dispatch("getGoods");
  },
  computed: {
    classify: function() {
      return this.$store.state.classify;
    },
    goods: function() {
      return this.$store.state.goods;
    }
  },
  methods: {
    toGoods(name) {
      // console.log(name)
      this.$store.dispatch("getGoods", name);
    },
    sort(id) {
      //排序
      this.selSort = id;
      switch (id) {
        case 1: //综合
          this.goods.sort((a, b) => {
            return b.originalPrice - a.originalPrice; //按照原价值排序
          });
          break;
        case 2: //销量
          this.goods.sort((a, b) => {
            return b.monthSales - a.monthSales; //按照销量值排序
          });
          break;
        case 3: //价格
          this.goods.sort((a, b) => {
            return b.actualPrice - a.actualPrice; //按照折后价排序
          });
          break;
        case 4: //新品
          this.goods.map(item => {
            item.createTime = new Date(item.createTime).getTime();
          });
          this.goods.sort((a, b) => {
            return b.createTime - a.createTime; //按照上架时间排序
          });
          break;
      }
    }
  }
};
</script>

<style scoped>
/* 排序 */
.sort {
  height: 40px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>
